<template>
	<view class="kinoCom">
		<search :gradientScale='gradientScale'></search>
		<scroll @setGradientScale="setGradientScale">
			<banner :list='bannerList' v-if="bannerList.length"></banner>
			<category :list="categoryList" type='kino' v-if="categoryList.length"></category>
			<cardList></cardList>
			<newList :list="newDataList" :title="newDataTitle" v-if="newDataList.length"></newList>
			<homeList :list="homeDataList" v-if="homeDataList.length"></homeList>
		</scroll>
	</view>
</template>

<script>
	import {
		getKino
	} from '@/api/kino.js'
	import search from '@/components/custom/search.vue'
	import scroll from '@/components/custom/scrollView.vue'
	import newList from '@/components/custom/newList.vue'
	import homeList from '@/components/custom/homeList.vue'
	import banner from '@/components/custom/immerseBanner.vue'
	import category from '@/components/custom/category.vue'
	import cardList from '@/components/custom/cardList.vue'

	import {
		gradientScaleMixin
	} from '@/mixins/gradientScale.js'
	export default {
		components: {
			search,
			scroll,
			banner,
			category,
			cardList,
			newList,
			homeList,
		},
		mixins: [gradientScaleMixin],
		data() {
			return {
				bannerList: [],
				categoryList: [],
				newDataList: [],
				newDataTitle: '',
				homeDataList: [],
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			async getData() {
				this.$emit('setLoading', true)
				const res = await getKino()
				if (!res || (res && res.statusCode != 200)) {
					return
				}
				this.bannerList = res.data.data.banner
				this.categoryList = res.data.data.category
				this.newDataList = res.data.data.new
				this.newDataTitle = res.data.data.newTitle
				this.homeDataList = res.data.data.category
				this.$emit('setLoading', false)
			}
		},
	}
</script>

<style>
	.kinoCom {}
</style>